<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/menu1.css" />
		<title>实现菜单的收缩与扩展</title>
	</head>

	<body>
		<div id="leftNav" class="left-nav">
			<div id="myMenu" class="menuBox">
				<ul class="spMenuBox">
					<li class="spMenuItem active">
						<div class="spMenu"  >
							<i class="fa fa-folder-open"></i>
							<span>菜单1</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: block;">
							<li><span class="subMenu">菜单1.1</span></li>
							<li><span class="subMenu">菜单1.2</span></li>
							<li><span class="subMenu">菜单1.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单2</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单3</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单4</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单4.1</span></li>
							<li><span class="subMenu">菜单4.2</span></li>
							<li><span class="subMenu">菜单4.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i class="fa fa-folder"></i>
							<span>菜单5</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
						</ul>
					</li>
				</ul>
			</div>
			<h1>谭君容189000829</h1>
		</div>
	</body>
	<!-- <script>
		var list = document.querySelectorAll('.spMenuBox>li');
		
		function accordion(e) {
			e.stopPropagation();
			if (this.className.contains('active')) {
				this.className.remove('active');
			} else
			if (this.parentElement.parentElement.className.contains('active')) {
				this.className.add('active');
			} else
			{
				for (i = 0; i < list.length; i++) {
					list[i].className.remove('active');
		
				}
				this.className.add('active');
			}
		}
		for (i = 0; i < list.length; i++) {
			list[i].addEventListener('click', accordion);
		}
		</script> -->
	<script type="text/javascript">
		//获取第一个UL下面的所有li标签
	    let menu_1=document.querySelectorAll(".spMenuBox>li");
	    //利用for循环给UL下面的所有第一个li标签设置点击功能
	    for (let i=0;i<=menu_1.length-1;i++){
		//点击功能
		menu_1[i].onclick=function(){
		  //取出当前指向的所有ul标签
		  let ul_Two=this.querySelector("ul");
		  //获取li标签下面的Ul标签
		  let subMenu=document.querySelectorAll(".spMenuItem ul")
		  for(let i of subMenu){
			//把所有的二级菜单设置为隐藏
			i.style.display="none";
		  }
		  //设置点击一级菜单的时候二级菜单为可见
		  ul_Two.style.display="block";
		  //获取所有的文件图标
		  let tubiao=document.querySelectorAll(".spMenu>i:nth-of-type(1)")
		  for(let i of tubiao){
			//离开当前标题，指向其他标题的时候就关闭当前的文件图标
			i.className="fa fa-folder";
		  }
		  //改变当前下拉图标的方向，点击的时候变成向上
		  this.className="spMenuItem active";
		  //把当前的文件图标设置为打开
		  this.querySelector(".spMenu i").className="fa fa-folder-open";
		}
	  }
	  </script>
</html>
